import React from 'react';
import {observer, inject} from 'mobx-react';

import {Layout, Button, confirm, toast} from "amis";
import {RouteComponentProps} from "react-router";
import {IPageEditorStore} from "../store/PageEditorStore";
import {Editor, ShortcutKey} from 'amis-editor';
import {Icon} from '../icons/index';

let host = `${window.location.protocol}//${window.location.host}`;
let iframeUrl = '/editor.html';

// 如果在 二级路径 里面
if (/^\/alc/.test(window.location.pathname)) {
    host += '/alc';
    iframeUrl = '/alc' + iframeUrl;
}

const schemaUrl = `${host}/schema.json`;

// @ts-ignore
__uri('amis/schema.json');

@inject('pageEditorStore')
@observer
export default class PageEditor extends React.Component<{ pageEditorStore: IPageEditorStore } & RouteComponentProps<{ pageId: string }>> {

    UNSAFE_componentWillMount() {
        const {pageEditorStore, match, history} = this.props
        console.log("match.params", match.params)
        if (match.params && match.params.pageId) {
            let pageId = match.params.pageId
            pageEditorStore.setCurrPageId(pageId)
        }
    }

    exit() {
        const {pageEditorStore, history} = this.props
        history.push("/pages/" + pageEditorStore.currPageId);
    }

    render() {
        const {pageEditorStore, history} = this.props

        console.log("pageEditorStore.schema", pageEditorStore.schema)

        return (
            <div className="Editor-Demo">
                <div className="Editor-header">
                    <div className="Editor-title">amis 可视化编辑器</div>
                    <div className="Editor-view-mode-group-container">
                        <div className="Editor-view-mode-group">
                            <div
                                className={`Editor-view-mode-btn editor-header-icon ${
                                    !pageEditorStore.isMobile ? 'is-active' : ''
                                }`}
                                onClick={() => {
                                    pageEditorStore.setIsMobile(false);
                                }}
                            >
                                <Icon icon="pc-preview" title="PC模式"/>
                            </div>
                            <div
                                className={`Editor-view-mode-btn editor-header-icon ${
                                    pageEditorStore.isMobile ? 'is-active' : ''
                                }`}
                                onClick={() => {
                                    pageEditorStore.setIsMobile(true);
                                }}
                            >
                                <Icon icon="h5-preview" title="移动模式"/>
                            </div>
                        </div>
                    </div>

                    <div className="Editor-header-actions">
                        <ShortcutKey/>

                        <div
                            className={`header-action-btn m-1 ${
                                pageEditorStore.isPreview ? 'primary' : ''
                            }`}
                            onClick={() => {
                                pageEditorStore.setPreview(!pageEditorStore.isPreview);
                            }}
                        >
                            {pageEditorStore.isPreview ? '返回' : '预览'}
                        </div>
                        {!pageEditorStore.isPreview && (
                            <React.Fragment>
                                <div className={`header-action-btn primary`} onClick={() => {
                                    pageEditorStore.save()
                                    toast.success('保存成功', '提示')
                                }}>
                                    保存
                                </div>
                                <div className={`header-action-btn exit-btn`} onClick={() => this.exit()}>
                                    退出
                                </div>
                            </React.Fragment>
                        )}
                    </div>
                </div>

                <div className="Editor-inner">
                    <Editor
                        theme={'cxd'}
                        preview={pageEditorStore.isPreview}
                        isMobile={pageEditorStore.isMobile}
                        value={pageEditorStore.schema}
                        onPreview={() => {
                            pageEditorStore.setPreview(true);
                        }}
                        onChange={(value: any) => pageEditorStore.setSchema(value)}
                        onSave={() => {
                            pageEditorStore.save()
                            toast.success('保存成功', '提示');
                        }}
                        className="is-fixed"
                        $schemaUrl={schemaUrl}
                        iframeUrl={iframeUrl}
                        showCustomRenderersPanel={true}
                    />
                </div>
            </div>
        );
    }
}
